<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>v-if和v-show</h1>
    <p>共同点：都只会在页面上显示逻辑判断成功后的DOM。</p>
    <p>不同点</p>
    <ul>
        <li>v-if还有v-else，有逻辑分支控制。但是v-show没有else的支路。</li>
        <li>v-if对于判断失败的节点，会直接不渲染该节点（页面中，无法查看到节点），v-show也会渲染节点，只是使用display属性将其隐藏。</li>
        <li>v-if由false变为true的时候，会重新渲染节点（重新触发组件的生命周期）。</li>
    </ul>
    <main id="app">
        <button @click="handleClick(1)">+</button>
        <button @click="handleClick(-1)">-</button>
        <p>你的分数是：{{score}}</p>
        <hr>
        <h2>v-if</h2>
        <p v-if="score >= 60">及格了</p>
        <p v-else>没有及格</p>
        <hr>
        <h2>v-show</h2>
        <p v-show="score >= 60">及格了</p>
        <p v-show="score < 60">没有及格</p>
        <hr>
        <h2>v-if,v-else-if,v-else</h2>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 70">中等</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    // 事件处理函数，最好定义在methods里面
    // function handleClick(e) {
    //     console.log(e);
    //     alert(1);
    // }

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                score: 50
            }
        },
        methods: {
            handleClick(v) {
                this.score += v;
            }
        }
    });
</script>

</html>